<template>
  <div class="seed-table-root">

    <el-table
      stripe
      height="100%"
      border
      size="mini"
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <expert-list @expertDetail="expertDetail" :clt-id="scope.row.cltId"></expert-list>
        </template>
      </el-table-column>
      <el-table-column
        label="编号"
        width="120"
        align="center">
        <template slot-scope="scope">
          <el-tooltip effect="light" :content="scope.row.germplasmCode" placement="top">
            <div class="table-prop-place">
              {{ scope.row.germplasmCode }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="cltTime"
        width="110"
        label="采集时间">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <el-table-column width="90" label="采集人">
        <template slot-scope="scope">
          <el-tooltip effect="light" :content="scope.row.cltUserName" placement="top">
            <div class="table-prop-place">
              {{ scope.row.cltUserName }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="所属位置">
        <template slot-scope="scope">
          <el-tooltip effect="light" :content="scope.row.shelvePosition" placement="top">
            <div class="table-prop-place">
              {{ scope.row.shelvePosition }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        label="采集地点">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.location" effect="light" placement="top">
            <div class="table-prop-place">
              {{ scope.row.location }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="elecation"
        align="center"
        width="80"
        label="海拔">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        label="入库时间">
        <template slot-scope="scope">
          <el-tooltip effect="light" :content="scope.row.createTime" placement="top">
            <div class="table-prop-place">
              {{ scope.row.createTime }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="amount"
        align="center"
        width="80"
        label="库存量">
      </el-table-column>
      <el-table-column
        prop="inActive"
        width="80"
        align="center"
        label="入库活性">
      </el-table-column>
      <el-table-column
        prop="inUserName"
        width="90"
        align="center"
        label="入库登记人">
      </el-table-column>
      <el-table-column
        prop="outCount"
        width="80"
        align="center"
        label="出库次数">
      </el-table-column>

      <el-table-column width="60" label="适生区">
        <template slot-scope="scope">
          <el-button @click="queryRegion(scope)" size="mini" type="text">查看</el-button>
        </template>
      </el-table-column>

      <el-table-column width="55" label="操作">
        <template slot-scope="scope">
          <el-button @click="outStorageBtn(scope)" size="mini" type="text">出库</el-button>
        </template>
      </el-table-column>
    </el-table>

    <lark-card border :x="500" body-height="600px" :body-width="'500px'" v-if="outStorageVisible" :hidden="!outStorageVisible"
               @closeAction="outStorageVisible = !outStorageVisible"
               card-title="出库" draggable
               :radius="false">
      <el-scrollbar>
        <div v-loading="loading" class="out-storage-body" style="padding: 10px 5px">
          <el-form ref="out-storage-form" :model="outStorageForm" label-width="100px" :rules="rules">
            <el-form-item label="出库时间" prop="outTime">
              <el-date-picker v-model="outStorageForm.outTime" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="出库时活性" prop="outActive">
              <el-input v-model="outStorageForm.outActive"></el-input>
            </el-form-item>
            <el-form-item label="出库量" prop="outAmount">
              <el-input type="number" v-model="outStorageForm.outAmount"></el-input>
            </el-form-item>
            <el-form-item label="出库原因" prop="outReason">
              <el-input v-model="outStorageForm.outReason"></el-input>
            </el-form-item>
            <el-form-item label="出库类型" prop="outType">
              <el-input v-model="outStorageForm.outType"></el-input>
            </el-form-item>
            <el-form-item label="出库千粒重" prop="outGrain">
              <el-input v-model="outStorageForm.outGrain"></el-input>
            </el-form-item>
            <el-form-item label="出库纯净度" prop="outPurity">
              <el-input v-model="outStorageForm.outPurity"></el-input>
            </el-form-item>
          </el-form>
          <div class="out-storage-submit">
            <el-button @click="outStorageSubmit">出库</el-button>
          </div>
        </div>
      </el-scrollbar>
    </lark-card>


  </div>
</template>

<script>
import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
import expertList from '@/components/ServiceComponents/expertList'

export default {
  name: 'seed-table',
  components: {
    expertList
  },
  props: {
    tableData: {
      type: Array,
      default: []
    }
  },
  setup(props, content) {
    const validateOutAmount = (rule, value, callback) => {
      console.log('rule', rule)
      if (value == null || value === '') {
        callback(new Error('出库量不能为空'))
      } else if (value == 0) {
        callback(new Error('出库量不能为0'))
      } else if (value > data.currentOutStorage) {
        callback(new Error('出库量不得大于入库量:' + data.currentOutStorage))
      } else {
        callback()
      }
    }
    let data = reactive({
      tdtest: [{ cltId: 'fb2ead71243d40a6abbf9d725fc1f03c' }],
      rules: {
        outTime: [
          { required: true, message: '出库时间不能为空', trigger: 'blur' }
        ],
        outActive: [
          { required: true, message: '出库时活性不能为空', trigger: 'blur' }
        ],
        outAmount: [
          { required: true, validator: validateOutAmount, trigger: 'blur' }
        ],
        outReason: [
          { required: true, message: '出库原因不能为空', trigger: 'blur' }
        ],
        outType: [
          { required: true, message: '出库类型不能为空', trigger: 'blur' }
        ],
        outGrain: [
          { required: true, message: '出库千粒重不能为空', trigger: 'blur' }
        ],
        outPurity: [
          { required: true, message: '出库纯净度', trigger: 'blur' }
        ]
      },
      currentOutStorage: null,//当前出库的数据可出库量
      loading: false,
      outStorageVisible: false,
      outStorageForm: {
        storageId: null,//库编号，数据id
        outTime: null,//出库时间
        shelveId: null,//货架编号
        outActive: null,//出库时活性
        outAmount: null,//出库量
        outReason: null,//出库原因
        outType: null,//出库类型
        outGrain: null,//出库千粒重
        outPurity: null//出库纯净度
      }
    })
    const outStorageBtn = (scope) => {
      data.outStorageVisible = true
      data.outStorageForm.shelveId = scope.row.shelveId
      data.outStorageForm.storageId = scope.row.storageId
      data.currentOutStorage = scope.row.amount

    }
    const outStorageSubmit = () => {
      //
      content.refs['out-storage-form'].validate(valid => {
        if (valid) {
          data.loading = true
          content.emit('outStorageAction', {
            params: data.outStorageForm, scb: () => {
              data.outStorageVisible = false
              data.loading = false
            },
            fcb: () => {
              data.loading = false
            }
          })
        }
      })
    }

    const expertDetail = (id) => {
      content.emit('expertDetail', id)
    }
    const queryRegion = ({ row }) => {
      content.emit('queryRegion', row)
    }
    return { ...toRefs(data), outStorageBtn, outStorageSubmit, expertDetail, queryRegion }
  }
}

</script>

<style scoped lang="scss">
.seed-table-root {
  height: 100%;

  .table-prop-place {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

<style lang="scss">


.out-storage-body {
  position: relative;
  height: 590px;

  .out-storage-submit {
    position: absolute;
    right: 20px;
    bottom: 10px;
  }
}

</style>
